<script setup>
import * as echarts from "echarts";
import "whatwg-fetch";
import { onMounted, reactive, ref } from "vue";

const chartRef = ref();
let myChart = reactive();
let currentCode = "100000";
let preCode = "";

// 请求数据
const getMapData = async (code) => {
	try {
		const response = await fetch(`/Json/${code}.json`); // 替换为你的 JSON 文件路径
		return await response.json();
	} catch (error) {
		const geoJson = await getMapData("100000");
		mapOptions(geoJson);
	}
};

// 设置地图
const mapOptions = (geoJson) => {
	echarts.registerMap("mapJson", geoJson);
	const mapData = geoJson.features.map(({ properties: { adcode, name } }) => {
		return {
			name,
			adcode,
		};
	});
	const mapOptions = {
		geo: {
			show: false,
			map: "mapJson",
			label: {
				normal: {
					show: false,
				},
				emphasis: {
					show: false,
				},
			},
			roam: true,
			itemStyle: {
				show: true,
				normal: {
					areaColor: "transparent",
					borderColor: "#3fdaff",
					borderWidth: 2,
					shadowColor: "rgba(63, 218, 255, 0.5)",
					shadowBlur: 30,
				},
				emphasis: {
					areaColor: "#2B91B7",
				},
			},
		},
		series: [
			{
				type: "map",
				roam: false,
				label: {
					normal: {
						show: true,
						textStyle: {
							color: "#fff",
							fontSize: 12,
							fontWeight: 500,
						},
					},
					emphasis: {
						textStyle: {
							color: "rgb(183,185,14)",
						},
					},
				},

				itemStyle: {
					normal: {
						areaColor: "#003669",
						borderColor: "#3fdaff",
						borderWidth: 2,
						shadowColor: "rgba(63, 218, 255,0.6)",
						shadowBlur: 35,
					},
					emphasis: {
						areaColor: "#2B91B7",
					},
				},
				zoom: 1.1,
				map: "mapJson",
				data: mapData,
			},
			{
				type: "scatter",
				id: "scatter",
				name: "scatter",
				coordinateSystem: "geo",
        zlevel: 6,
        data:[
          {
            
          }
      ]
			},
		],
	};
	myChart.setOption(mapOptions, true);
};

const init = async () => {
	myChart = echarts.init(chartRef.value);
	const geoJson = await getMapData("100000");
	mapOptions(geoJson);
	mapClick();
};

const mapClick = () => {
	myChart.on("click", async (params) => {
		const originCode = params.data.adcode;
		if (originCode) {
			preCode = currentCode;
			currentCode = originCode;
			const geoJson = await getMapData(originCode);
			console.log(geoJson, "geoJson");
			mapOptions(geoJson);
		}
	});
};

const mapBack = async () => {
	const geoJson = await getMapData(preCode);
	currentCode = preCode;
	mapOptions(geoJson);
};

onMounted(() => {
	init();
});
</script>

<template>
	<div class="wrapper">
		<div class="chart" ref="chartRef" />
		<a @click="mapBack">返回</a>
	</div>
</template>

<style scoped>
.wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

.chart {
	width: 100%;
	height: 100%;
}

a {
	position: absolute;
	top: 30px;
	right: 30px;
}
</style>
